<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文体生活</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/literary/index.css">
</head>
<body>
	<header class="mui-bar mui-bar-nav header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">文体生活</h1>
	</header>
	<div id='section'>
        <!--banner-->
        <div class="mui-slider" id="slider"></div>
        <!--内容-->
        <ul class="type_list">
            <li id="venue">
                <img src="../../images/literary/venue.png" alt="">
                <a href="venue.html">文体剧团</a>
            </li>
            
            <li onclick="add('http://wap.lylib.net/','图书馆')">
                <img src="../../images/literary/library.png" alt="">
                <a href="http://wap.lylib.net/">图书馆</a>
            </li>
            
            <li id="gym">
                <img src="../../images/literary/TY.png" alt="">
                <a href="gym.html">文体协会</a>
            </li>
        </ul>
        <div class="WT-activity">
            <p class="style_title"><i></i>活动报名</p>
            
        </div>
        <div class=" prediction">
            <p class="style_title"><i></i>活动预告</p>
            <ul class="prediction_title">
                
            </ul>
            <ul class="pre_list">
                
            </ul>
            <h2 class="more">更多活动预告</h2>
        </div>
        <div class="dynamic">
            <p class="style_title"><i></i>文体动态</p>
            <ul class='news'>
                
            </ul>
            <h2 class='more'>更多文体动态</h2>
        </div>
        <div class="video">
        	<p class="style_title"><i></i>文体视频</p>
        	<ul>
                
            </ul>
            <h2 class='more'>更多文体视频</h2>
        </div>
	</div>

    <script src="../../plugins/mui/mui.min.js"></script>
    <script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
    <script src="../../js/getApiToken.js"></script>
    <script src="../../js/md5.js"></script>
    <script src="../../plugins/template/template.js"></script>
    <script src="../../plugins/mui/mui.pullToRefresh.js"></script>
    <!--banner轮播-->
    <script id="banner" type="text/html">
        <div class="mui-slider-group mui-slider-loop">
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="{{baseUrl}}{{data[data.length-1].images}}">
                </a>
            </div>
            {{each data as value i}}
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="{{baseUrl}}{{value.images}}">
                    </a>
                </div>
            {{/each }}
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="{{baseUrl}}{{data[0].images}}">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator mui-text-center">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>

    </script>
    <!--活动报名：图片类型-->
    <script id="activity" type="text/html">
        <div class="imgs">
            <a class="img imglong" id="{{data[0].id}}">
                <img src="{{baseUrl}}{{data[0].front_cover}}" alt="活动报名" />
                <div class="bg_"></div>
                <div class="bg">
                    <p>{{data[0].tag_name}}活动</p>
                    <span class="border_span">{{data[0].name}}</span>
                </div>

            </a>
        </div>
        <div class="imgs">
            <a class="img imgr fl" id="{{data[1].id}}">
                <img src="{{baseUrl}}{{data[1].front_cover}}" alt="" />
                <div class="bg_"></div>
                <div class="bg">
                    <p>{{data[1].tag_name}}活动</p>
                    <span>{{data[1].name}}</span>
                </div>
            </a>
            <a class="img fr" id="{{data[2].id}}">
                <img src="{{baseUrl}}{{data[2].front_cover}}" alt="" />
                <div class="bg_"></div>
                <div class="bg">
                    <p>{{data[2].tag_name}}活动</p>
                    <span>{{data[2].name}}</span>
                </div>
            </a>
        </div>
        <h2 class="more">更多活动报名</h2>
    </script>
    <!--活动预告三张-->
    <script id="notice_img" type="text/html">
        {{each data as value i}}
            <li id="{{value.id}}">
                <img src="{{baseUrl}}{{value.images}}" alt="">
                <div>
                    <p>{{value.name}}</p>
                     {{if value.detail}}
                    <span>{{value.detail}}</span>
                    {{/if}}
                </div>
            </li>
        {{/each}}
    </script>
    <!--活动预告列表-->
    <script id="notice" type="text/html">
    	{{each data as value i}}
    		 <li id="{{value.id}}" class='notice_li'>
                 <div class="view">
                     <img src="{{baseUrl}}{{value.front_cover}}" alt="">
                     <p></p>
                 </div>
                 <div class="address">
                     <ul>
                         <li>{{value.title}}</li>
                         <li>活动时间：{{value.create_time}}</li>
                     </ul>
                 </div>
             </li>
    	{{/each}}
    </script>
    <!-- 文体新闻动态 -->
    <script id="news-list" type="text/html">
		{{each data as value i}}
			<li class='news_li' id='{{value.id}}'>
                <div class="left_img">
                    <img src="{{baseUrl}}{{value.front_cover}}" alt="">
                </div>
                <div class="right_main">
                    <div>
                        <h2>{{value.title}}</h2>
                    </div>
                    <p class="clear" style='display:block;overflow: hidden;'>
                        <span class='left'>{{value.views}}</span>
                        <span class='right'>{{value.create_time}}</span>
                    </p>
                </div>
            </li>
		{{/each}}
    </script>
    <script id="video" type="text/html">
    	{{each data as value i}}
    		<li class='news_li' id='{{value.id}}'>
                <div class="video-box">
					<img class="video-icon" src="../../images/icon/news_list/video.png">
					<img class="left list_left" src="{{baseUrl}}{{value.front_cover}}" alt="" />
					<div class="shadow"></div>
				</div>
                <div class="right_main">
                    <div>
                        <h2>{{value.title}}</h2>
                    </div>
                    <p class="clear" style='display:block;overflow: hidden;'>
                        <span class='left'>{{value.views}}</span>
                        <span class='right'>{{value.create_time}}</span>
                    </p>
                </div>
            </li>
    	{{/each}}
    </script>
    <script>
		mui.init();
        mui.plusReady(function(){
            //首页轮播
              myAjax('physical/banner/getList','get',{},function(data){
                  if(data.code==0){
                      var list = {
                          data:data.data,
                          baseUrl:_baseUrl
                      };
                      var html = template('banner',list);
                      $("#slider").append(html);
                      var gallery = mui('#slider');
                      gallery.slider({
                          interval:3000
                      });
                  }else{
                  	mui.alert(data.msg);
                  }
              });
            //活动预告:上三个
            myAjax('physical/notice/getType','get',{},function(data){
                if(data.code==0){
                	var list={
                        data:data.data,
                        baseUrl:_baseUrl
                    };
                  	var html=template('notice_img',list);
                  	$('.prediction_title').append(html);
                }else{
                	mui.alert(data.msg);
                }
            })
            //活动报名
            myAjax('physical/activities/getList','get',{'total':3},function(data){
            	if(data.code==0){
                    var list={
                        data:data.data,
                        baseUrl:_baseUrl
                    };
                  var html=template('activity',list);
                  $('.WT-activity').append(html);
            	}else{
            		mui.alert(data.msg);
            	}
            })
            //活动预告
            myAjax('physical/notice/getList','get',{'total':3},function(data){
            	if(data.code==0){
                    var list={
                        data:data.data,
                        baseUrl:_baseUrl
                    };
                  var html=template('notice',list);
                  $('.pre_list').append(html);
            	}else{
            		mui.alert(data.msg);
            	}
            })
            //文体动态
            myAjax('physical/news/getList','get',{'total':3},function(data){
            	console.log(JSON.stringify(data))
            	if(data.code==0){
                    var list={
                        data:data.data,
                        baseUrl:_baseUrl
                    };
                  var html=template('news-list',list);
                  $('.news').append(html);
            	}else{
            		mui.alert(data.msg);
            	}
            })
            //文体视频
            myAjax('physical/videos/getList','get',{'total':3},function(data){
				console.log(JSON.stringify(data))
				if(data.code == 0){
					var list={
                        data:data.data,
                        baseUrl:_baseUrl
                    };
                  	var html=template('video',list);
                  	$('.video ul').append(html);
                }else{
                	mui.alert(data.msg);
                }
			});
            //跳转活动报名列表页
           mui('.WT-activity').on('tap','.more',function(e){
                mui.openWindow({
    				url:'activity_index.html',
    				id:'activity_index',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            })
            //跳转活动详情页
            mui('.WT-activity').on('tap','a',function(e){
             	var id_detail=$(this).attr('id');
	            mui.openWindow({
	                url:'activity_detail.html',
	                id:'activity_detail',
	                extras:{
	                    detail_id:id_detail,
	                },
	                waiting:{
	                    autoShow:true,
	                    title:'正在加载...',
	                },
	                show:{
	                    autoShow:true,
	                    aniShow:'fade-in'
	                }
	            })
            })
           //活动预告
            mui('.prediction').on('tap','.more',function(e){
                mui.openWindow({
    				url:'activity_forecast.html',
    				id:'activity_forecast',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            })
            //跳转预告详情页
            mui('.prediction').on('tap','.notice_li',function(e){
             	var id_detail=$(this).attr('id');
	            mui.openWindow({
	                url:'forecast_detail.html',
	                id:'forecast_detail',
	                extras:{
	                    detail_id:id_detail,
	                },
	                waiting:{
	                    autoShow:true,
	                    title:'正在加载...',
	                },
	                show:{
	                    autoShow:true,
	                    aniShow:'fade-in'
	                }
	            })
            });
            //跳转活动遇到列表显示
            mui('.prediction_title').on('tap','li',function(e){
                var type_id=$(this).attr('id');
                mui.openWindow({
                    url:'activity_forecast.html',
                    id:'activity_forecast',
                    extras:{
                        type_id:type_id,
                    },
                    waiting:{
                        autoShow:true,
                        title:'正在加载...',
                    },
                    show:{
                        autoShow:true,
                        aniShow:'fade-in'
                    }
                })
            })
            //跳转文体剧团
            mui('.type_list').on('tap','#venue',function(e){
                mui.openWindow({
    				url:'venue.html',
    				id:'venue',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            })
            //跳转文体协会
            mui('.type_list').on('tap','#gym',function(e){
                mui.openWindow({
    				url:'gym.html',
    				id:'gym',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            })
            //跳转新闻详情页
            mui('.news').on('tap','.news_li',function(e){
            	var img=$(this).find('img').attr('src');
            	var id=$(this).attr('id');
            	mui.openWindow({
					url: 'news_detail.html',
					extras: {
						'detail_id': id,
						//详情页获取图片
						'shareimg':img
					}	
				})	
            })
            //跳转新闻列表页
            mui('.dynamic').on('tap','.more',function(e){
                mui.openWindow({
    				url:'news.html',
    				id:'news',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            });          

			//跳转视频详情页
            mui('.video').on('tap','.news_li',function(e){
            	var img=$(this).find('img').attr('src');
            	var id=$(this).attr('id');
            	mui.openWindow({
					url: 'video_detail.html',
					extras: {
						'detail_id': id,
						//详情页获取图片
						'shareimg':img
					}	
				})	
            })
            //跳转视频列表页
            mui('.video').on('tap','.more',function(e){
                mui.openWindow({
    				url:'video_list.html',
    				id:'video_list',
    				show:{
      					autoShow:true,
      					aniShow:'fade-in'
      				}
    			});
            }); 
         })
        //第三方链接跳转
		function add(a,b){
			mui.openWindow({
				url:'../executive_housekeeper/exposure.html',
				id:'exposure.html',
				show:{
					autoShow:true//页面loaded事件发生后自动显示，默认为true
				},
				waiting:{
					autoShow:true,//自动显示等待框，默认为true
					title:'加载中...'//等待对话框上显示的提示内容
				},
				extras:{
					'link':a,
					'title':b
					//自定义扩展参数，可以用来处理页面间传值
				}
			})
		}                      
    </script>
</body>
</html>